<template>
  <main>
    <aside>
      <ul>
        <li v-for="(item, index) in img_list" :key="index">
          <img :src="item" alt="">
        </li>
      </ul>
    </aside>
    <article>
      <div class="video_audio">
        <div class="video">
          <FlvPlayer />
        </div>
        <div class="audio">
          <img :src="img" align="middle" />
        </div>
      </div>
      <div class="res">
        <ul>
          <li v-for="(item, index) in reg_img_list" :key="index">
            <div class="res_img">
              <img :src="item.img" alt="" class="img1">
              <img :src="item.match_img" alt="" class="img2">
            </div>
            <div class="res_sim">{{ item.score }}</div>
          </li>
        </ul>
      </div>


    </article>
  </main>
</template>
    
<script setup>
import { onMounted, ref } from "vue";
import FlvPlayer from "@/components/FlvPlayer.vue";

const img_list = ref([])
const img = ref()
const reg_img_list = ref([])

const initWebSocket = () => {
  //初始化websocket      
  var wsuri = "ws://10.82.14.162:8000";
  // var ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
  var ws_on_line = wsuri + '/ws/video/wms/'
  // 本地走代理/vue.config.js,线上也代理nginx代理
  console.log('111111111111', ws_on_line)

  // var ws_scheme = window.location.protocol==="https:"?"wss":"ws"      
  let websock = new WebSocket(ws_on_line);
  websock.onopen = websocketonopen;
  websock.onmessage = websocketonmessage;
  websock.onerror = websocketonerror;
  // websock.onclose = websocketclose;   
}

const websocketonopen = () => {
  //连接建立之后执行send方法发送数据     
  console.log("建立连接");
  // var actions = { message: "连接测试" };
  // sendMessage(actions);
}

const websocketonerror = (e) => {
  //连接建立失败重连      
  console.log("连接error", e);
  // initWebSocket();
}

const websocketonmessage = (e) => {
  //数据接收      
  // console.log("res: ", e.data)
  let v_data = JSON.parse(e.data)
  // console.log('v_data:', v_data)
  // this.websocket_data = JSON.parse(e.data);
  // console.log("nihao:", this.websocket_data['nihao'])
  // console.log("websocket-res", JSON.stringify(this.websocket_data))
  // console.log("接收后端数据type", typeof(v_data.img))
  // 将websocket消息展示在消息提示框     
  img_list.value.unshift(v_data.img)
  if (v_data.score > 0.1) {
    reg_img_list.value.unshift(v_data)
  }

}

const sendMessage = (Data) => {
  //数据发送     
  websock.send(JSON.stringify(Data));
}

const websocketclose = (e) => {  //关闭      
  console.log('断开连接', e);
}

const closeConn = () => {
  websock.close(); // 向服务端发送断开连接的请求
}

onMounted(() => {
  initWebSocket()
})

</script>
    
<style scoped>
@import '../less/Home.css'
</style>